<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小R的个人资料</title>
    <link rel="stylesheet" href="../CSS/person.css">
    <link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
    <div class="header w">
        <div class="logo">
            <img src="../images/logo.png" width="120px" height="80px" alt="">
        </div>
        <div class="search">
            <input type="text" placeholder="请输入图书名字">
            <button><img src="../images/btn.png" alt=""></button>
        </div>
        <div class="nav">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="./login.html">登录/注册</a></li>            
                <li><a href="./settlement.html">购物车</a></li>
                <li><a href="./shop.html">商城</a></li>
                <li><a href="./contact.html">联系客服</a></li>
                <li><a href="./service.html">售后</a></li>
            </ul>
        </div>
        <div style="height: 90px;"></div>
    <div class="container">
        <h2>个人资料</h2>
        <div class="avatar">
            <img src="../images/user.jpg" alt="用户头像">
        </div>
        <div class="profile-info">
            <label for="nickname">昵称:</label><br>
            <p id="nickname" contenteditable="true" class="editable">小R 2022131328</p>
        </div>
        <div class="profile-info">
            <label for="gender">性别:</label><br>
            <p id="gender" contenteditable="true" class="editable">女</p>
        </div>
        <div class="profile-info">
            <label for="phone">电话:</label><br>
            <p id="phone" contenteditable="true" class="editable">123-456-7890</p>
        </div>
        <div class="profile-info">
            <label for="email">邮箱:</label><br>
            <p id="email" contenteditable="true" class="editable">123456@qq.com</p>
        </div>
        <div class="profile-info">
            <label for="bio">个人简介:</label><br>
            <p id="bio" contenteditable="true" class="editable">这个人很神秘，什么都没有说......</p>
        </div>
        <div class="profile-info">
            <label>收货地址:</label>
            <div class="address">
                <p>广东省 东莞市 xxxx</p>
            </div>
            <div class="address">
                <p>广东省 深圳市 xxxx</p>
            </div>
            <div class="address">
                <p>广东省 韶关市 xxxx</p>
            </div>
            <div class="address">
                <p>广东省 珠海市 xxxx</p>
            </div>
        </div>
    </div>
    <div class="tool">
        <a href="./settlement.html" class="on tool-item1">购物车</a>
        <a href="./contact.html" class="tool-item2">联系<br>客服</a>
        <a href="./person.html" class="tool-item3">个人<br>资料</a>
        <a id="goTop" class="tool-item4" onclick="goTop()"><span class="top-arrow"></span>顶部</a>
        <a href="./service.html" class="tool-item5">反馈</a>
        <a href="../index.html" class="tool-item5">首页</a>
    </div>
    <script>
        const editableElements = document.querySelectorAll('[contenteditable="true"]');
        editableElements.forEach(element => {
            element.addEventListener('blur', () => {
                // 当失去焦点时，将内容保存到本地存储
                localStorage.setItem(element.id, element.innerText);
            });
            // 从本地存储中获取内容并展示
            element.innerText = localStorage.getItem(element.id) || element.innerText;
        });
    </script>
</body>
</html>